<template>
    <view v-if="isShow" class="flex1">
		<view v-if="isfixed" class="block100"></view>
		<scroll-view scroll-x :class="isfixed?'navtop nav':'nav'" scroll-with-animation>
		  <view :class="index===menuTabCur?'cu-item cur':'cu-item'" :style="index==menuTabCur?'color:'+color:''" v-for="(item,index) in menulist" :key="index" @click="handleMune(index)">
		    {{item}}
		  </view>
		 </scroll-view>
	</view>
</template>

<script>
export default {
	props: {
		color:{
			type: String,
			default: () => {
			   return "#d81e06";
			}
		},
		isShow: {
		    type: Boolean,
		    default: () => {
		       return false;
		    }
		},
		isfixed: {
		    type: Boolean,
		    default: () => {
		       return false;
		    }
		},
		menulist:{
		    type: Array,
		    default: () => {
		       return [];
		    }
		},
		menuTabCur:{
			type: Number,
			default: () => {
			   return 0;
			}
		},
	},
    data() {
        return {
			
        };
    },
    mounted() {
		
	},
    methods: {
        //点击栏目
		handleMune(index){
			this.$emit("handleMune",index)
		},
		
    }
};
</script>

<style lang="scss" scoped>
.nav{
  background-color: #ffffff;
   white-space: nowrap;
   border-bottom: 1px solid #f8f8f8;
 }
 .navtop{
   position: fixed;
   top: 0;
   left: 0;
   z-index: 88;
   width: 100%;
   background-color: #FFFFFF;
 }
 .nav .cu-item.cur {
   border-bottom: 4rpx solid;
   // color: #d81e06;
   font-weight: bold;
 }
 .nav .cu-item {
  height: 90rpx;
  display: inline-block;
  line-height: 90rpx;
  margin: 0 10rpx;
  padding: 0 20rpx;
 }
</style>